<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <div class="h_top">
          <div class="bread_title">
            <span>新增工位</span>
          </div>
          <div class="add_button">
            <div class="buttonBox">
              <el-button type="primary" icon="el-icon-document-checked" size="mini" @click="save">保存</el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div>
      <el-row>
        <el-col :span="24">
          <el-form ref="form" :model="data" :inline="true" :rules="formRules">
            <el-row :gutter="10">
              <el-col :span="4">
                <el-form-item prop="coding">
                  <div>编号</div>
                  <el-input v-model="data.coding" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="name">
                  <div>名称</div>
                  <el-input v-model="data.name" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="cost_id">
                  <div>成本中心</div>
                  <v-select v-model="data.cost_id" action="costList" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="org">
                  <div>组织</div>
                  <v-select v-model="data.org" action="orgList" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="department">
                  <div>部门</div>
                  <v-select v-model="data.department" :disabled="!data.org" :query="{org:data.org}" action="departmentList" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="status">
                  <div>状态</div>
                  <el-select v-model="data.status" size="mini">
                    <el-option v-for="(item, index) in theStatus" :key="index" :value="index" :label="item" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="position_id">
                  <div>位置</div>
                  <v-select v-model="data.position_id" action="positionList" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="factory_id">
                  <div>工厂</div>
                  <v-select v-model="data.factory_id" :disabled="!data.position_id" :query="{position_id:data.position_id}" action="factoryList" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="workshop_id">
                  <div>车间</div>
                  <v-select v-model="data.workshop_id" :disabled="!data.factory_id" :query="{factory_id:data.factory_id}" action="workshopList" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="parent_id">
                  <div>生产线</div>
                  <v-select v-model="data.parent_id" :disabled="!data.workshop_id" :query="{workshop_id:data.workshop_id}" action="lineList" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="type">
                  <div>类型</div>
                  <el-select v-model="data.type" size="mini">
                    <el-option v-for="(item, index) in typeCategory" :key="index" :value="index" :label="item" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="admin_id">
                  <div>维护负责人</div>
                  <v-select v-model="data.admin_id" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="sort">
                  <div>排序</div>
                  <el-input v-model="data.sort" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="start_date">
                  <div>启用日期</div>
                  <el-date-picker v-model="data.start_date" type="datetime" placeholder="选择日期时间" align="right" value-format="yyyy-MM-dd" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="end_date">
                  <div>结束日期</div>
                  <el-date-picker v-model="data.end_date" type="datetime" placeholder="选择日期时间" align="right" value-format="yyyy-MM-dd" size="mini" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-tabs>
            <el-tab-pane label="描述">
              <el-row :gutter="10">
                <el-col :span="24">
                  <wangeditor id="content" v-model="data.content" />
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import API from '@/api/asset/process'
import { typeCategory, theStatus } from '@/utils/options'
import Wangeditor from '@/components/editor/wangeditor'
import VSelect from '@/components/select'
export default {
  inject: ['addOne'],
  components: {
    Wangeditor,
    VSelect
  },
  data() {
    return {
      data: {
        coding: '',
        // status: '',
        // type: '',
        sort: 100,
        cost_id: 1,
        org: 1,
        department: 17,
        status: 1,
        type: 0,
        admin_id: 46,
        position_id: 1,
        factory_id: 90,
        workshop_id: 97
      },
      typeCategory,
      theStatus,
      formRules: {
        coding: [
          {
            required: true,
            message: '请输入编号',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入工位名称',
            trigger: 'blur'
          }
        ],
        cost_id: [
          {
            required: true,
            message: '请选择成本中心',
            trigger: 'change'
          }
        ],
        org: [
          {
            required: true,
            message: '请选择组织',
            trigger: 'change'
          }
        ],
        department: [
          {
            required: true,
            message: '请选择部门',
            trigger: 'change'
          }
        ],
        status: [
          {
            required: true,
            message: '请选择状态',
            trigger: 'change'
          }
        ],
        position_id: [
          {
            required: true,
            message: '请选择位置',
            trigger: 'change'
          }
        ],
        parent_id: [
          {
            required: true,
            message: '请选择生产线',
            trigger: 'change'
          }
        ],
        type: [
          {
            required: true,
            message: '请选择类型',
            trigger: 'change'
          }
        ],
        admin_id: [
          {
            required: true,
            message: '请选择维护负责人',
            trigger: 'change'
          }
        ],
        // start_date: [
        //   {
        //     required: true,
        //     message: '请输入启用日期',
        //     trigger: 'blur'
        //   }
        // ],
        // end_date: [
        //   {
        //     required: true,
        //     message: '请输入结束日期',
        //     trigger: 'blur'
        //   }
        // ],
        sort: [
          {
            required: true,
            message: '请输入排序',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {},
  created() {
  },
  methods: {
    save() {
      const thisData = this.data
      const thisForm = this.$refs.form
      this.addOne(API, thisData, thisForm)
    }
  }
}
</script>
